<template>
  <div class="main">
    <div class="header">
      <el-dialog
      title="轮播图添加"
      :visible.sync="imgAdd"
      width="55%"
      :before-close="imgClose">
      <el-upload
      class="upload-demo"
      ref="upPic"
      :data="upData"
      :action="evUrl+'zj/addPicInfo'"
      :auto-upload="false"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="selectPic"
      :file-list="fileList"
      :on-success="upSuccess"
      list-type="picture">
      <el-button size="small"  v-if="isFlag" type="primary">点击上传</el-button>
      </el-upload>
      <el-input v-model="upData.picLink" style="width:58%;margin-top:18px;margin-bottom:18px" placeholder="输入链接"></el-input>
      <div><el-button @click="upImg" size="mini">提交</el-button></div>
      </el-dialog>
          <div class="header-l">
            <el-button size="mini" @click="addImg" type="primary">添加</el-button>
          </div>
          <div class="header-r">
          </div>
    </div>
    <div class="body">
      <el-table
    :data="tableData"
    ref="itemRef"
    style="width: 100%"
    height="498">
    <el-table-column
      fixed
      prop="p_time"
      label="时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="p_url"
      label="图片"
      width="180">
      <template slot-scope="scope">
        <el-image
        v-if="!isImg || (isCurrent!==scope.row.p_id)"
        style="width:158px;height:88px"
        :src="evUrl+scope.row.p_url">
        </el-image>
        <div style="width:158px;height:88px;overflow:hidden"
         v-else>
         <el-upload
         :data="{isCurrent:isCurrent,p_url:p_url}"
         action="http://127.0.0.1:3008/zj/editCarouselPic"
         list-type="picture-card"
         :auto-upload="true"
         :on-preview="handlePictureCardPreview1"
         :on-change="changImg2"
         :on-remove="handleRemove1"
         :on-success="upGood">
         <i style="width:100%;height:100%;float:left;margin-top:28px" class="el-icon-plus"></i>
         </el-upload>
         <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
         </el-dialog></div>
      </template>
    </el-table-column>
    <el-table-column
      label="链接">
      <template slot-scope="scope">
        <span v-if="!isLink || (isCurrent!==scope.row.p_id)">{{scope.row.p_link}}</span>
        <div class="inputEdit" v-else>
          <el-input size="mini" v-model="linkVal" style="width:218px;border:none"></el-input>
          <el-button style="font-size:18px;background:transparent;border:0" icon="el-icon-check" size="mini" @click="upLink(scope.row)"></el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="显示状态"
      width="180">
      <template slot-scope="scope">
        <el-switch
        :value="scope.row.p_status===1"
        @change="changeStatus(scope.row)"
        active-color="#13ce66"
        inactive-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="180">
      <template slot-scope="scope">
        <el-button v-if="isCurrent!==scope.row.p_id" @click="editImg(scope.row)" type="text" size="small">上传图片</el-button>
        <el-button v-if="isCurrent!==scope.row.p_id" @click="editLink(scope.row)" type="text" size="small">修改链接</el-button>
        <el-button v-if="isCurrent===scope.row.p_id" @click="cancelEdit()" type="text" size="small">取消</el-button>
        <el-button @click="deleteOpt(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
    <div class="footer" style="position:fixed;right:0;bottom:0">
      <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="5"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>
<script>
import { getCarouselPic, carouselStatus, editCarouselPic, deletePicInfo } from '../api/info'
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      isImg: false,
      isLink: false,
      isCurrent: '',
      linkVal: '',
      // 当前页
      currentPage: 1,
      total: 10,
      // 判断图片是否存在
      isFlag: true,
      upData: {
        picLink: ''
      },
      p_url: '',
      imgAdd: false,
      evUrl: this.$evUrl,
      value: true,
      tableData: [],
      fileList: [],
      fileList2: []
    }
  },
  methods: {
    // 删除轮播图
    deleteOpt (row) {
      deletePicInfo({ p_id: row.p_id, p_url: row.p_url }).then(({ data }) => {
        if (data.status === 200) {
          this.$message.success(data.message)
          this.getPicData()
        }
      })
    },
    // 修改图片成功
    upGood (respone) {
      console.log(respone)
      if (respone.status === 200) {
        this.$message.success('修改图片成功')
        this.cancelEdit()
        this.getPicData()
      }
    },
    // 提交链接修改
    upLink (row) {
      editCarouselPic({ Lid: row.p_id, linkVal: this.linkVal }).then(({ data }) => {
        if (data.status === 200) {
          this.cancelEdit()
          this.getPicData()
          this.$message.success('修改成功')
        }
      })
    },
    // 提交修改
    editLink (row) {
      this.isLink = true
      this.isCurrent = row.p_id
      this.linkVal = row.p_link
    },
    // 修改图片
    changImg2 (file, fileList) {
      this.fileList2 = fileList
      console.log(file, fileList)
    },
    // 修改图片
    handleRemove1 (file, fileList) {
      this.fileList2 = fileList
      console.log(file, fileList)
    },
    handlePictureCardPreview1 (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 取消
    cancelEdit () {
      this.isImg = false
      this.isLink = false
      this.isCurrent = ''
    },
    // 修改操作editOpt
    editImg (row) {
      this.isCurrent = row.p_id
      this.isImg = true
      this.p_url = row.p_url
    },
    // 改变当前状态
    changeStatus (row) {
      carouselStatus({ id: row.p_id, statusVal: row.p_status }).then(({ data }) => {
        if (data.status === 200) {
          this.getPicData()
        }
      })
    },
    // 当前页面改变
    handleCurrentChange (val) {
      this.currentPage = val
      this.getPicData()
    },
    // 添加轮播图
    addImg () {
      this.imgAdd = true
    },
    // 移除图片
    handleRemove (file, fileList) {
      this.fileList = fileList
      if (fileList.length === 0) {
        this.isFlag = true
      }
    },
    // 上传图片前
    handlePreview (file) {
      console.log(file)
    },
    // 添加图片
    selectPic (file, fileList) {
      this.fileList = fileList
      if (fileList.length === 1) {
        this.isFlag = false
      }
    },
    // 点击提交
    upImg () {
      if (this.fileList.length !== 1) {
        return this.$message.info('图片为空')
      }
      if (!this.upData.picLink) {
        return this.$message.info('链接为空')
      }
      // 上传图片
      this.$refs.upPic.submit()
    },
    // 上传成功
    upSuccess (response) {
      if (response.status === 200) {
        this.fileList.splice(0)
        this.upData.picLink = ''
        this.isFlag = true
        this.$refs.upPic.clearFiles()
        this.imgAdd = false
        this.getPicData()
      }
    },
    // 关闭单框前
    imgClose () {
      if (this.fileList.length > 0) {
        this.fileList.splice(0)
        this.$refs.upPic.clearFiles()
      }
      if (this.upData.picLink) {
        this.upData.picLink = ''
      }
      this.isFlag = true
      this.imgAdd = false
    },
    // 获取数据
    getPicData () {
      getCarouselPic({ currentPage: this.currentPage }).then(({ data }) => {
        this.tableData = data.dataArr
        this.total = data.total
        // console.log(data)
      })
    }
  },
  mounted () {
    this.getPicData()
  }
}
</script>
<style scoped lang="less">
  .header{
    display: flex;
    height: 32px;
    // background: red;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-upload--picture-card{
    height:88px;
    width:158px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item{
    height:88px;
    width:158px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item-actions{
    width:100%
  }
  .inputEdit{
    /deep/ .el-input__inner{
      background: transparent;
      border:0;
    }
    /deep/ .el-input--mini .el-input__inner{
      height:32px;
      line-height:32px;
      font-size:15px;
    }
  }

</style>
